<template class="form-radio-config-container">
    <van-form>
        <h2  class="form-group-label">
            背景色选择
        </h2>
        <van-field
                style="overflow: visible; z-index: 999;"
                label="颜色"
        >
            <template #input>
                <colorPicker v-model="data.style.checkedColor" />
            </template>
        </van-field>
        <h2  class="form-group-label">
            基本信息
        </h2>
        <van-field
                v-model="data.label"
                label="名称"
                :rules="[{ required: true, message: '请填写名称' }]"
        />
        <h2 class="form-group-label">
            选项
        </h2>
        <van-cell-group>
            <draggable
                    tag="div"
                    :list="data.options"
                    group="form-radio-config-components"
                    v-bind="dragOptions"
                    @start="drag = true"
                    @end="drag = false"
            >
                <van-field
                        v-model="item.label"
                        center
                        label="名称"
                        placeholder=""
                        v-for="(item, index) in data.options" :key="index"
                >
                    <template v-if="data.options.length > 1" #button>
                        <van-button size="mini" @click.stop="removeOption(index)" type="danger">删除</van-button>
                    </template>
                </van-field>
            </draggable>
        </van-cell-group>
        <van-button style="margin: 10px 0; height: 36px" block size="small" @click.stop="addOption" type="primary">增加选项</van-button>
        <Del :id="data.id"></Del>
    </van-form>

</template>

<style>
    .form-radio-config-container .el-form-item__label{
        padding: 0;
    }

    .form-radio-config-box-card .el-card__body{
        padding-top: 10px;
    }

    .form-radio-config-box-card .el-form-item__label{
        padding-bottom: 0;
    }
</style>
<script>
    import Del from './../../common/del'
    import Draggable from 'vuedraggable'

    export default {
        components: {
            Del,
            Draggable
        },
        props: {
            data: Object
        },
        methods : {
            addOption(){
                let l = this.data.options.length
                this.data.options.push({
                    label : '选项' + (l + 1)
                })
            },
            removeOption(index) {
                this.data.options.splice(index, 1)
            }
        },
        data() {
            return {
                drag : false
            }
        },
        computed: {
            dragOptions() {
                return {
                    animation: 200,
                    group: "form-drag-group",
                    disabled: false,
                    ghostClass: "ghost"
                };
            },
        }
    }
</script>